<template>
  <div class="number-select-box">
    <div class="select-row border-bottom">
      <div class="top">
        <tail-box :place="item.place.context" class="adjust"></tail-box>
        <div class="selector">
          <number-selector
            class="number-select-adjust"
            @click="handleFastChoose"
            @clear="handleSelectorClear"
            :activeIndex="activeIndex" 
            :count="count"
          ></number-selector>
        </div>
      </div>
      <div class="bottom">
        <lottery-balls
          :activeSwitchIndex="activeSwitchIndex"
          class="lottery-ball-adjust"
          v-for="(numberObj, index) in item.numbers"
          :numberObj="numberObj"
          :key="numberObj.id"
          @click.native="handleBallSelect(index, item.place.context)"
          >
        </lottery-balls>
      </div>
    </div>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBalls from '@/components/base/lottery-balls/lottery-balls'
import TailBox from '@/components/tail-box/tail-box'
import NumberSelector from '@/components/base/number-selector/number-selector'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    PlayInstruction,
    LotteryBalls,
    NumberSelector,
    TailBox
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '',
            position: 0
          },
          numbers: [
            {
              id: 1,
              number: 0,
              selected: false,
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                }
              ]
            }
          ]
        }
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      count: 0,
      activeIndex: -1
    }
  },
  methods: {
    handleBallSelect(index, type) {
      this.count = 0
      this.activeIndex = -1
      let numbers = this.clonedItem.numbers
      numbers[index].selected = numbers[index].selected ? false : true
      // this.countNumber(this.clonedItem.numbers)
      this.$emit('click', this.clonedItem)
    },
    // 快速选择（大小单双）
    handleFastChoose(i) {
      this.activeIndex = i
      this.count = 0
      let numbers = this.clonedItem.numbers
      switch(i) {
        case 0:
          numbers.forEach((item, index) => {
            if (index < 5) {
              item.selected = false
            } else {
              item.selected = true
            }
          })
          break;
        case 1:
          numbers.forEach((item, index) => {
            item.selected = index >= 5 ? false : true
          })
          break;
        case 2:
          numbers.forEach((item, index) => {
            item.selected = index % 2 == 0 ? true : false
          })
          break;
        case 3 : 
          numbers.forEach((item, index) => {
            item.selected = index % 2 == 0 ? false : true
          })
          break;
        case 4 :
          numbers.forEach((item, index) => {
            item.selected = true
          })
          break;
        case 5 : 
          numbers.forEach((item, index) => {
            item.selected = false
          })
          break;
      }
      this.countNumber(numbers)
      this.$emit('click', this.clonedItem)
    },
    // 快速选择清空状态
    handleSelectorClear() {
      this.clear()
      this.activeIndex = -1
    },
    clear() {
      this.clonedItem.numbers.forEach(item => {
        item.selected = false
        // 清空状态时将金额清除
        if(item.parameter[this.activeSwitchIndex].parameter) {
          item.parameter[this.activeSwitchIndex].number = item.parameter[this.activeSwitchIndex].parameter
        }
      })
      this.$emit('click', this.clonedItem)
      this.count = 0
    },
     // 统计选中彩票个数
    countNumber(numbers) {
      numbers.forEach(value => {
        if (value.selected)  {
          this.count++
        }
      })
    },
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    },
    ...mapGetters('lottery', ['getUnitPrice', 'getUnitRate'])
  },
  watch: {
    item(newVal) {
      this.count = 0
      this.countNumber(newVal.numbers)
    },
    count() {
      if (this.count == 0) {
        this.activeIndex = -1
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
    .bottom >>> .lottery-ball 
      width 20%
      display flex 
      flex-direction column 
      align-items center
      margin-bottom 10px
    .select-row 
      padding 0 10px 
      box-sizing border-box
      .top 
        display flex
        align-items center
        justify-content space-between
        box-sizing border-box 
        margin 10px 0
        // .adjust 
        //   width 45px
        //   height 24px
        //   line-height 24px
        .selector 
          .number-select-adjust
            height 30px 
            width 220px
            box-sizing border-box
      .bottom 
        display flex 
        flex-wrap wrap
        margin 0 auto

</style>